<template>
    <div>
        <el-button type="primary" @click="autoPaly">开盘挂单</el-button>
        <el-table
            :data="OrderListdata"
            border
            style="width: 100%">
            <el-table-column
            prop="createTime"
            label="时间"
            width="180">
            </el-table-column>
            <el-table-column
            prop="goodsName"
            label="活期商品"
            width="180">
            </el-table-column>
            <el-table-column
            prop="type"
            label="添加类型">
            </el-table-column>
            <el-table-column
            prop="type"
            label="类型">
            </el-table-column>
            <el-table-column
            prop="state"
            label="状态">
            <template slot-scope="scope">
                <div>{{stateparams(scope.row.state)}}</div>
            </template>
            </el-table-column>
            <el-table-column
             label="操作">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleSee(scope.row.id)">查看</el-button>
                <el-button
                size="mini"
                type="primary"
                v-if="scope.row.state == 3 || scope.row.state == 2"
                @click="handleEdit(scope.row.id)">修改</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    v-if="scope.row.state == 1"
                    @click="handleStop(scope.row.id)">暂停</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" :page-sizes="[5,10,20,30,40]" :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="活期商品" prop="goodsNo" :label-width="formLabelWidth">
                <el-select v-model="form.goodsNo" placeholder="请选择活期商品" :disabled="disabled">
                    <el-option :label="item.name" :value="item.goods_no" 
                    v-for="(item,index) in listGoodsL" :key="index"
                    
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="挂单类型" prop="type" :label-width="formLabelWidth" >
                <el-radio-group v-model="form.type" :disabled="disabled">
                    <el-radio label="0">委托购买</el-radio>
                    <el-radio label="1">委托寄售</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="挂单数量" prop="count" type="number" :label-width="formLabelWidth">
              <el-input v-model="form.count" autocomplete="off" style="width:200px" placeholder="请输入挂单数量"></el-input>
            </el-form-item>
            <el-form-item label="挂单价格" prop="price" :label-width="formLabelWidth">
               <el-input v-model="form.price" autocomplete="off" style="width:200px"  placeholder="请输入挂单价格"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="openingList('form')">开启挂单</el-button>
        </div>
        </el-dialog>
        <el-dialog title='开盘挂单' :visible.sync="dialogFormDetail" style="width:1000px;margin: 0 auto">
            <div class="hieghtcss">
                运行状态：{{stateparams(details.state)}}
            </div>
            <div class="hieghtcss">
                活期商品：{{details.goodsName}}
            </div>
            <div class="hieghtcss">
                挂单类型：{{details.type}}
            </div>
            <div class="hieghtcss">
                挂单数量：{{details.count}}
            </div>
            <div class="hieghtcss">
                挂单价格：{{details.price}}
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
      data() {
        return {
          title:'设置',
          currentPage: 1,
          pageSize: 10,
          total: 1,
          dialogFormDetail:false,
          dialogFormVisible: false,
          form: {
            count:'',
            price:'',
            type:'',
            goodsNo: '',
            userId:JSON.parse(localStorage.getItem("userInfo")).userId
           
          },
            OrderListdata:[],
            listGoodsL:[],
            formLabelWidth: '120px',
            rules: {
                price: [
                    { required: true, message: '请输入挂单价格', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                count: [
                    { required: true, message: '请输入挂单数量', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                goodsNo: [
                    { required: true, message: '请选择活期商品', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '挂单类型', trigger: 'change' }
                ],
                
            },
            details:{},
            id:'',
            disabled:false

        }
      },
      computed: {
        
      },
      methods: {
        stateparams(n){
            let params = '';
            switch (n){
                case 0:
                params = '就绪';
                break;
                case 1:
                params = '运行中';
                break;
                case 2:
                params = '暂停';
                break;
                case 3:
                params = '已暂停';
                break;
                default:
            }
            return params
        }, 
        //添加
        async addAutoOrder(){
            let {data} = await this.$post({
                api:'/tran/addAutoOrder',
                data:this.form
                
            })
            if(data.code === 0){
                this.$message({
                message: '添加成功',
                type: 'success'
                });
                this.dialogFormVisible = false;
                //   this.form.count = '';
                // this.form.price = '';
                // this.form.goodsNo = '';
                // this.form.type = '';
                // this.form.state = '';
                this.autoOrderList()
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
        },
        async listGoods(){
            let {data} = await this.$post({
                api:'/menu/listGoods',
                data:{
                    tradeType:1
                }
                
            })
            if(data.code === 0){
                this.listGoodsL = data.data
                console.log(data)
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
        },
        handleSee(id){
            console.log(id,'id')
           this.dialogFormDetail = true;
           this.autoOrderDetail(id)
        },
        //查看
        async autoOrderDetail(id){
            let {data} = await this.$post({
                api:'/tran/autoOrderDetail',
                data:{
                    id:id
                }
            })
            if(data.code === 0){
                this.details = data.data;
                if(this.title == '修改'){
                    this.form.count = data.data.count;
                    this.form.price = data.data.price;
                    this.form.goodsNo = data.data.goodsNo;
                    if(data.data.type == '委托寄售'){
                        this.form.type = '1'
                    }else{
                        this.form.type = '0'
                    }
                }
               
                // console.log(data)
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
        },
        //修改
        handleEdit(id){
            this.title = '修改';
            this.disabled = true;
            this.dialogFormVisible = true;
            this.autoOrderDetail(id);
            this.id = id;

            // this.editAutoOrderStatus(id)
        },
        async editAutoOrder(){
            let {data} = await this.$post({
                api:'/tran/editAutoOrder',
                data:{
                    id:this.id,
                    count:this.form.count,
                    price:this.form.price
                }
            })
            if(data.code === 0){
                this.$message({
                message: '修改成功',
                type: 'success'
                });
                this.dialogFormVisible = false;
                this.editAutoOrderStatus(this.id)
                // this.form.count = '';
                // this.form.price = '';
                // this.form.goodsNo = '';
                // this.form.type = '';
                // this.form.state = '';
                this.autoOrderList()
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
         },
        //列表
        async autoOrderList(){
            let {data} = await this.$post({
                api:'/tran/autoOrderList',
                data:{
                    current:this.currentPage,
                    pageSize:this.pageSize,
                    userId:JSON.parse(localStorage.getItem("userInfo")).userId
                }
            })
            if(data.code === 0){
               this.OrderListdata = data.data.list;
               this.total = data.data.total;
               this.pageSize = data.data.pageSize;
               this.currentPage = data.data.pageNum;
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
        },
        autoPaly(){
            this.title = '设置';
            this.dialogFormVisible = true;
            this.disabled = false;
            if(this.title == '设置'){
                this.form.count = '';
                this.form.price = '';
                this.form.goodsNo = '';
                this.form.type = '';
                this.form.state = '';
            }
           
        },
        openingList(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                console.log(this.form.count)
                // alert('submit!');
                var re = /^[0-9]+$/ ;
                var regExp = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
  
                if(!(re.test(this.form.count))){
                  return   this.$message({
                            type: 'error',
                            message: '挂单数量请输入正整数'
                        }); 
                }
                if(!(regExp.test(this.form.price))){
                  return   this.$message({
                            type: 'error',
                            message: '请输入正确的挂单价格类型'
                        }); 
                }
                if(this.title == '设置'){
                    this.addAutoOrder()
                }else{
                    this.editAutoOrder();
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        handleStop(id){
            this.$confirm('确定暂停运行吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(id,'iddd')
                    this.editAutoOrderStatus(id)
               
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消暂停'
                });          
            });
            
        },
        async editAutoOrderStatus(id){
            let {data} = await this.$post({
                api:'/tran/editAutoOrderStatus',
                data:{
                    id:id
                }
            })
            if(data.code === 0){
                this.$message({
                    type: 'success',
                    message: '成功!'
                });
                this.autoOrderList();
            }else{
                this.$message({
                message: data.msg,
                type: 'error'
                });
            }
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.autoOrderList();
       },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.autoOrderList();
        },
      },
      mounted () {
        
          this.listGoods();
          this.autoOrderList();
      }
    }
  </script>
  <style>
.hieghtcss{
    margin-bottom: 20px;
}
  </style>